<script lang="ts" setup>
import { computed, onMounted, ref, onUnmounted, watch } from 'vue';
import { getPaletteColorByNumber } from '@sa/color';

defineOptions({ name: 'AnimatedBg' });

interface Props {
  /** Theme color */
  themeColor: string;
  /** Animation speed (lower is faster) */
  speed?: number;
}

const props = withDefaults(defineProps<Props>(), {
  speed: 15
});

const lightColor = computed(() => getPaletteColorByNumber(props.themeColor, 100));
const midColor = computed(() => getPaletteColorByNumber(props.themeColor, 300));
const darkColor = computed(() => getPaletteColorByNumber(props.themeColor, 500));

// 监听主题颜色变化，添加过渡效果
watch(() => props.themeColor, () => {
  // 主题颜色变化时应用过渡
}, { immediate: true });

const phase1 = ref(0);
const phase2 = ref(Math.PI / 4);
const animationFrameId = ref<number | null>(null);

function animate() {
  phase1.value += 0.003 / (props.speed / 10); // 减慢波浪速度使其更柔和
  if (phase1.value > Math.PI * 2) {
    phase1.value = 0;
  }
  
  phase2.value += 0.002 / (props.speed / 10);
  if (phase2.value > Math.PI * 2) {
    phase2.value = 0;
  }
  
  animationFrameId.value = requestAnimationFrame(animate);
}

onMounted(() => {
  animate();
});

onUnmounted(() => {
  stopAnimation();
});

function stopAnimation() {
  if (animationFrameId.value !== null) {
    cancelAnimationFrame(animationFrameId.value);
    animationFrameId.value = null;
  }
}

// 波浪路径计算 - 居中的主波浪
const wave1Path = computed(() => {
  const points = [];
  const amplitude = 25; // 增加振幅
  const width = 1800;
  const segments = 100;
  const centerY = 200; // 设置波浪垂直居中位置
  
  for (let i = 0; i <= segments; i++) {
    const x = (i / segments) * width;
    const y = Math.sin(i / segments * Math.PI * 3 + phase1.value) * amplitude + centerY;
    points.push(`${x},${y}`);
  }
  
  return `M0,${centerY} Q${points.join(' ')} 1800,${centerY} L1800,400 L0,400 Z`;
});

// 波浪路径计算 - 第二个波浪效果
const wave2Path = computed(() => {
  const points = [];
  const amplitude = 30; 
  const width = 1800;
  const segments = 120;
  const centerY = 190; // 稍微错开位置制造层次感
  
  for (let i = 0; i <= segments; i++) {
    const x = (i / segments) * width;
    const y = Math.sin(i / segments * Math.PI * 4 + phase2.value) * amplitude + centerY;
    points.push(`${x},${y}`);
  }
  
  return `M0,${centerY} Q${points.join(' ')} 1800,${centerY} L1800,400 L0,400 Z`;
});

// 第三个波浪，更轻柔
const wave3Path = computed(() => {
  const points = [];
  const amplitude = 15;
  const width = 1800;
  const segments = 80;
  const centerY = 180;
  
  for (let i = 0; i <= segments; i++) {
    const x = (i / segments) * width;
    const y = Math.sin(i / segments * Math.PI * 5 + phase1.value * 0.8) * amplitude + centerY;
    points.push(`${x},${y}`);
  }
  
  return `M0,${centerY} Q${points.join(' ')} 1800,${centerY} L1800,400 L0,400 Z`;
});
</script>

<template>
  <div class="absolute-lt z-1 size-full overflow-hidden bg-anim">
    <svg viewBox="0 0 1800 400" class="size-full" preserveAspectRatio="none">
      <defs>
        <!-- 波浪渐变 -->
        <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :stop-color="lightColor" />
          <stop offset="50%" :stop-color="midColor" />
          <stop offset="100%" :stop-color="darkColor" />
        </linearGradient>
        <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" :stop-color="darkColor" />
          <stop offset="50%" :stop-color="midColor" />
          <stop offset="100%" :stop-color="lightColor" />
        </linearGradient>
        <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" :stop-color="midColor" />
          <stop offset="100%" :stop-color="lightColor" />
        </linearGradient>
        
        <!-- 渐变背景 -->
        <radialGradient id="bg-gradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
          <stop offset="0%" :stop-color="lightColor" stop-opacity="0.7" />
          <stop offset="100%" :stop-color="darkColor" stop-opacity="0.3" />
        </radialGradient>
        
        <!-- 气泡渐变 -->
        <radialGradient id="blob-gradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" :stop-color="midColor" stop-opacity="0.7" />
          <stop offset="100%" :stop-color="lightColor" stop-opacity="0.3" />
        </radialGradient>
        <radialGradient id="blob-gradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" :stop-color="midColor" stop-opacity="0.6" />
          <stop offset="100%" :stop-color="darkColor" stop-opacity="0.2" />
        </radialGradient>
      </defs>
      
      <!-- 背景填充 -->
      <rect x="0" y="0" width="100%" height="100%" fill="url(#bg-gradient)" />
      
      <!-- 漂浮气泡 -->
      <circle 
        cx="40%" 
        cy="30%" 
        r="200" 
        fill="url(#blob-gradient1)" 
        :transform="`translate(${Math.sin(phase1.value) * 15}, ${Math.cos(phase2.value) * 15})`" 
        opacity="0.6"
      />
      <circle 
        cx="70%" 
        cy="25%" 
        r="150" 
        fill="url(#blob-gradient2)" 
        :transform="`translate(${Math.sin(phase2.value) * 20}, ${Math.cos(phase1.value) * 20})`" 
        opacity="0.5"
      />
      <circle 
        cx="25%" 
        cy="40%" 
        r="100" 
        fill="url(#blob-gradient1)" 
        :transform="`translate(${Math.sin(phase1.value * 1.2) * 10}, ${Math.cos(phase2.value * 1.2) * 10})`" 
        opacity="0.4"
      />
      
      <!-- 波浪层 - 由底到顶排列 -->
      <path :d="wave1Path" fill="url(#gradient1)" opacity="0.5" />
      <path :d="wave2Path" fill="url(#gradient2)" opacity="0.4" />
      <path :d="wave3Path" fill="url(#gradient3)" opacity="0.3" />
    </svg>
  </div>
</template>

<style scoped>
.bg-anim {
  transition: all 0.6s ease;
}

svg {
  transition: all 0.6s ease;
}

path, circle {
  transition: fill 0.6s ease, transform 0.3s ease;
}
</style> 